<template>
	<gui-page ref="guiPage" :customHeader="true">
		<template v-slot:gHeader>
			<nav-bar-custom left-icon="left" :title="$t('navigationBar.changePassword')"></nav-bar-custom>
		</template>
		<template v-slot:gBody>
            <form class="form" @submit="formSubmit">
				<view class="uni-form-item">
					<view class="title" style="width:300rpx;">{{$t('setting.originalPassword')}}：</view>
					<input :password="!data.checked" class="uni-input" name="oldPassword" :placeholder="$t('materials.pleaseEnterTheOldPassword')" />
				</view>
                <view class="uni-form-item">
					<view class="title" style="width:300rpx;">{{$t('setting.confirmPassword')}}：</view>
					<input :password="!data.checked" class="uni-input" name="newPassword" :placeholder="$t('materials.pleaseEnterANewPassword')" />
				</view>
                <view class="uni-form-item">
					<view class="title" style="width:400rpx;">{{$t('setting.passwordAgain')}}：</view>
					<input :password="!data.checked" class="uni-input" name="nextPassword" :placeholder="$t('materials.againPassword')" />
				</view>
                <view class="checkbox">
                    <checkbox-group @change="change">
                        <label>
                            <checkbox value="box" color="rgb(55, 136, 108)" :checked="data.checked"/>{{$t('materials.phetherToDisplayPassword')}}
                        </label>
                    </checkbox-group>
				</view>
				<view class="page-bottom-boxtwo">
					<button class="button" type="primary" form-type="submit">{{$t("popup.confirm")}}</button>
				</view>
			</form>
		</template>
	</gui-page>
</template>

<script setup>
    import {
		reLaunch
	} from '@/utils/routerSkip.js'
	import {
		reactive,
		onMounted
	} from 'vue';
    import { USERINFO } from '@/constant/index.js'
    import {
        getCurrentUser,
        updateModifyPassword
	} from '@/api/api.js'

    //引入国际化
	import { useI18n } from 'vue-i18n';
	const { t } = useI18n();

    let data = reactive({
        userInfo:{},
		checked:false,
	})
	onMounted(()=>{
        if(!uni.getStorageSync(USERINFO)){
            requestData()
        }else{
            data.userInfo = uni.getStorageSync(USERINFO)
        }
    })
    const requestData = async ()=>{
        let res = await getCurrentUser({})
        if(res){
            data.userInfo = res
            uni.setStorageSync(USERINFO, data.userInfo);
        }else{
            uni.showToast({
                title: t('JsInternational.userInformationFailed'),
                icon: "none"
            });
        }
    }
    const change = (e)=>{
        let { value } = e.detail
        data.checked = value.length ? true:false
    }
	const formSubmit = async (e)=> {
        console.log(data.checked)
        let { newPassword,nextPassword,oldPassword } = e.detail.value
        if(!oldPassword.length){
            uni.showToast({
                title: t('materials.pleaseEnterTheOldPassword'),
                icon: "none"
            });
            return
        }
        if(!newPassword.length){
            uni.showToast({
                title: t('materials.pleaseEnterANewPassword'),
                icon: "none"
            });
            return
        }
        if(!nextPassword.length){
            uni.showToast({
                title: t('materials.againPassword'),
                icon: "none"
            });
            return
        }
        if(nextPassword !== newPassword){
            uni.showToast({
                title: t('materials.twoPasswordsAre'),
                icon: "none"
            });
            return
        }
        let parmes = {
            originalPassword:oldPassword,//原密码
            password:newPassword,//新密码
            userNameId:data.userInfo.userNameId,// 工号
        }
        let res = await updateModifyPassword(parmes)
        console.log(res)
        if(res.statusCode == 200){
            uni.showToast({
                title:t('materials.modifySuccessfully'),
                icon: "none",
                complete: () => {
                    reLaunch({
                        url: '/pages/login/login'
                    });
                }
            });
        }else{
           uni.showToast({
                title: res.message,
                icon: "none",
            }); 
        }
    }
</script>

<style lang="less">
.form{
    margin: 20rpx;
    // background: #fff;
    border-radius: 10rpx;
    .uni-form-item{
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 24rpx;
        border: 1rpx solid #A5A5A5;
        background: #fff;
        box-shadow: 0rpx 0rpx 8rpx 0 #A5A5A5;
        border-radius: 10rpx;
        overflow: hidden;
        margin-bottom: 24rpx;
        font-size: 26rpx;
        .title{
            color: #333;
            width: 170rpx;
        }
        .uni-input{
            flex: 1;
            color: #333;
            font-size: 26rpx;
        }
    }
    .checkbox{
        margin-top: 30rpx;
        display: flex;
        color: #333;
        align-items: center;
        justify-content: flex-end;
    }
}
@media (prefers-color-scheme: dark){
	.checkbox{color:#fff !important;}
}
.button{
    background-color: rgb(55, 136, 108) !important;
    width: 100%;
}

</style>
